<template>
    <div class="action-list-adapter">
        <div>
            <RadioGroup :model-value="refType" :items="typeDatasource" :disabled="disabled" @change="typeChange" />
        </div>
        <div>
            <CheckboxGroup
                v-if="refType === 'diy'"
                :model-value="refValues"
                v-bind="refRestProps"
                :disabled="disabled"
                @change="inputChange"
            />
        </div>
    </div>
</template>

<script setup lang="ts">
import {CheckboxGroup, RadioGroup} from './basic';
import {computed, ref, unref} from 'vue';
import {omit} from 'lodash-es';

const modelValue = defineModel<{type: string; values: Array<string>}>();

const props = defineProps({
    items: {
        type: Array<{value: string; label: string}>,
        default: () => []
    },
    disabled: Boolean,
    readonly: Boolean
});

const emits = defineEmits(['update:modelValue']);

const typeDatasource = [
    {
        label: '默认配置',
        value: 'default'
    },
    {
        label: '自定义配置',
        value: 'diy'
    }
];
const refType = ref(modelValue.value?.type || 'default');
const refValues = ref(modelValue.value?.values || []);

const refRestProps = computed(() => omit(props, 'modelValue'));
const typeChange = (inputValue) => {
    refValues.value = [];
    refType.value = inputValue;
    emits('update:modelValue', {type: unref(refType), values: unref(refValues)});
};
const inputChange = (inputValues) => {
    refValues.value = inputValues;
    emits('update:modelValue', {type: unref(refType), values: unref(refValues)});
};
</script>

<style lang="less" scoped>
@import '../css/lib.less';
.action-list-adapter {
}
</style>
